<template>
  <div class="navbar">
      <div 
      class="nav-item"
      v-for="item in tomatoes" :key="item.order"
      @click="go(item.link)"
      >
          <div class="img">
              <img :src="item.img" alt="">
          </div>
          <div class="inp">
              {{ item.name }}
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:"NavBar",
    props:{
        tomatoes:{
            type:Array
        }
    },
    methods:{
        go(link){
            this.$router.push(link)
        }
    }
}
</script>

<style lang="scss" scoped>
.navbar{
    margin-top: 25px;
    padding: 0 35px;
    width: 100%;
    display: flex;
    justify-content:space-between;
    .nav-item{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        .img{
            width: 34px;
            height: 34px;
            border-radius: 50%;
            overflow: hidden;
            >img{
                width: 100%;
                height: 100%;
            }
        }
        .inp{
            margin-top: 2px;
            text-align: center;
            font-size: 12px;
            color: #666;
        }
    }
}
</style>

